<template>
  <el-container class="data-collect-page" style="min-height: 100vh;">
   <el-header><h1 class="text-2xl font-bold text=primary">心理健康数据采集</h1></el-header>
   
   <el-main class="p-6 bg-white">
    <!-- 历史u数据回显 -->
<el-card class="mb-6" shadow="hover">
  <div class="flex justify-between items-center mb-2">
    <h5 class="text-lg font-semibold">历史采集记录</h5>
   <el-tag type="info" size="small">静态展示</el-tag>
  </div>
<p class="text-gray-600">昨日已填:焦虑、睡眠＜6小时</p>
</el-card>

<!-- 每日数据采集 -->
<el-form ref="dailyForm" :model="dailyForm" labe-width="120px" class="mb-6">
 <h5 class="text-xl font-semibold mb-4 text-gray-800">1. 每日采集项</h5>
  <el-form-item label="情绪标签" prop="emotion">
          <el-radio-group v-model="dailyForm.emotion">
            <el-radio :label="1">平静</el-radio>
            <el-radio :label="2">焦虑</el-radio>
            <el-radio :label="3">开心</el-radio>
            <el-radio :label="4">低落</el-radio>
          </el-radio-group>
        </el-form-item>
 <el-form-item>
    <el-select v-model="dailyForm.sleepTime" placeholder="选择睡眠时长">
      <el-option label="＜6小时" value="less6"></el-option>
       <el-option label="6-8小时" value="6to8"></el-option>
        <el-option label="＞8小时" value="more8"></el-option>
    </el-select>
</el-form-item>

 <el-form-item label="社交次数" prop="socialTime">
    <el-select v-model="dailyForm.socialTimes" placeholder="请选择社交次数">
      <el-option label="0次" value="0"></el-option>
       <el-option label="1-3次" value="1to3"></el-option>
        <el-option label="3次以上" value="more3"></el-option>
    </el-select>
</el-form-item>

 <el-form-item label="学习时长" prop="studyTime">
    <el-select v-model="dailyForm.studyTime" placeholder="请选择学习时长">
      <el-option label="＜2小时" value="less2"></el-option>
       <el-option label="2-4小时" value="2to4"></el-option>
        <el-option label="＞4小时" value="more4"></el-option>
    </el-select>
</el-form-item>
</el-form>



 <!-- 每周采集：折叠面板（避免每日重复填写） -->
      <el-collapse class="mb-6" v-model="activeCollapse">
        <el-collapse-item title="2. 每周采集项（每周填写1次）" name="weekly">
          <el-form ref="weeklyForm" :model="weeklyForm" label-width="240px">
            <el-form-item label="最近是否容易因小事烦躁？" prop="isIrritable">
              <el-radio-group v-model="weeklyForm.isIrritable">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="近一周是否经常感到疲惫、提不起精神？" prop="isTired">
              <el-radio-group v-model="weeklyForm.isTired">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="能否专注完成日常学习/生活任务？" prop="isFocus">
              <el-radio-group v-model="weeklyForm.isFocus">
                <el-radio :label="1">能</el-radio>
                <el-radio :label="0">不能</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>

        <!-- 提交按钮 -->
      <el-button type="primary" @click="submitData">提交今日数据</el-button>


   </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'DataCollect',
  data() {
    return {
      // 每日采集表单数据
      dailyForm: {
        emotion: '', // 1:平静, 2:焦虑, 3:开心, 4:低落
        sleepTime: '', // less6, 6to8, more8
        socialTimes: '', // 0, 1to3, more3
        studyTime: '' // less2, 2to4, more4
      },
      // 每周采集表单数据（双向绑定）
      weeklyForm: {
        isIrritable: '', // 1:是, 0:否
        isTired: '', // 1:是, 0:否
        isFocus: '' // 1:能, 0:不能
      },
       // 折叠面板激活状态（默认展开“每周”面板）
      activeCollapse: ['weekly']
    }
      
  },
   methods: {
    // 提交数据：静态阶段仅弹提示（无后端交互）
    submitData() {
      this.$message({
        message: '数据提交成功（静态展示，暂未对接后端）',
        type: 'success'
      });
      // 可选：提交后重置表单
      // this.dailyForm = { emotion: '', sleepTime: '', socialTimes: '', studyTime: '' };
    }
  }
}
</script>

<style scoped>
.data-collect-page {
  font-family: "Microsoft YaHei", sans-serif;
 
}
.el-header {
  background-color: #f5f7fa;
  padding: 1rem 2rem;
  border-bottom: 10px solid #eaeefb; 
  
}
.el-main {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
</style>